<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-24 20:57:54
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-26 17:22:33
 * @Description: 审批工作-详情
 -->

<template>
  <!--审批工作详情-->
  <div class="listTemplate">
    <mt-header title="审批工作详情" class="header">
      <router-link to="/myapproval" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <section class="t-body">

      <!-- 检查人开始 -->
      <mu-expansion-panel class="noshadow">
        <div slot="header" class="content-header-title">
          <span>检查人：{{dataPool.checkUserName}}</span>
          <br />
          <span>检查时间：{{dataPool.checkTime}}</span>
        </div>
        <section class="content">
          <p>项目名称：{{dataPool.orgName}}</p>
          <p>检查类型：{{dataPool.checkTypeName}}</p>
          <p>所属区域：{{dataPool.areaName}}</p>
          <p>检查部位：{{dataPool.checkParts}}</p>
          <p>检查结果：{{'暂无数据'}}</p>
          <p>问题类型：{{dataPool.problemTypeName}}</p>
          <p>问题等级：{{dataPool.problemLevel}}</p>
          <p>现场照片：</p>
          <p>问题描述：{{dataPool.problemDescription}}</p>
          <p style="display: flex;justify-content: space-between">
            <span>面图标记：</span>
            <span style="color:red;">查看>></span>
          </p>
          <p>整改期限：{{dataPool.endTime}}</p>
          <p>责任单位：{{dataPool.responsibleUnitName}}</p>
          <p>整改责任人：{{dataPool.responsibleUserName}}</p>
          <p>抄送人：
            <avatar-name v-for="(item, index) in dataPool.copyList" :key="index" :name="item.userName">
            </avatar-name>
          </p>
          <p>检查人签字：{{dataPool.checkSignature}}</p>
        </section>
      </mu-expansion-panel>
      <!-- 检查人结束 -->

      <!-- 整改责任人开始 -->
      <mu-expansion-panel class="noshadow">
        <div slot="header" class="content-header-title">
          <span>整改责任人：{{dataPool.responsibleUserName}}</span>
        </div>
        <!-- 问题闭合时显示 -->
        <rectification-responsible-person-card v-on:do="handleResponsibleBtnClick" v-if="query.applyType === '1'" v-bind="dataPool" :applyUserName="query.applyUserName"></rectification-responsible-person-card>
        <section v-else class="content">
          <p>整改责任人：{{dataPool.responsibleUserName}}</p>
          <p>整改完成时间：{{dataPool.endTime}}</p>
          <p>整改结果描述：{{dataPool.rectDesc}}</p>
          <section class="img-box">
            现场照片：
            <img v-if="dataPool.scenePhotos !== null" :src="dataPool.scenePhotos" preview="0" />
            <span v-else>暂无照片</span>
          </section>
        </section>
      </mu-expansion-panel>
      <!-- 整改责任人结束 -->

      <!-- 申请人开始 -->
      <!-- 延期申请时显示 -->
      <mu-expansion-panel class="noshadow" v-if="query.applyType === '0'">
        <div slot="header" class="content-header-title">
          <span>申请人：{{query.applyUserName}}</span>
        </div>
        <delay-apply-card v-on:apply="handleApplyBtnClick" v-bind="dataPool" :applyUserName="query.applyUserName" :applyTime="query.applyTime"></delay-apply-card>
      </mu-expansion-panel>
      <!-- 申请人结束 -->

      <!-- 临时注释 设计图中没有涉及到此 -->
      <!-- <mu-expansion-panel class="noshadow">
        <div slot="header" class="content-header-title">
          <span>复查人：张三</span>
        </div>
        <section class="content">
          <p>
            <span>复查人：张三</span>
          </p>
          <p>
            <span>复查时间：2019-09-25 15:23</span>
          </p>
          <p>
            <span>复查结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
          </p>
          <section class="img-box">
            现场照片：
            <img src="../../../assets/img/default.png" />
          </section>
        </section>
      </mu-expansion-panel> -->
      <!-- <section>
        <mu-form
          :model="form"
          class="mu-demo-form"
          :label-position="labelPosition"
          label-width="100"
          style="background-color:#fff;margin-top:10px;padding: 10px;"
        >
          <mu-form-item prop="radio" label="复查结果" style="font-size: 0.12rem;">
            <mu-radio v-model="form.radio" value="male" label="合格"></mu-radio>
            <mu-radio v-model="form.radio" value="female" label="不合格"></mu-radio>
          </mu-form-item>
          <mu-form-item prop="textarea" label="复查结果描述">
            <mu-text-field multi-line :rows="3" :rows-max="6" v-model="form.textarea"></mu-text-field>
          </mu-form-item>
        </mu-form>
        <section style="background-color: #FFFFFF; padding: 0 0.12rem 0.12rem;">
          <p style="color: rgba(0,0,0,.54);">现场照片</p>
          <a-upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            listType="picture-card"
            :fileList="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 3">
              <a-icon type="plus" />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
          <mu-flex justify-content="center" align-items="center">
            <mu-button small>取消</mu-button>
            <mu-button style="margin-left: 0.2rem;" small color="primary">确认</mu-button>
          </mu-flex>
        </section>
      </section> -->
    </section>
  </div>
</template>

<script>
import RectificationResponsiblePersonCard from "./components/RectificationResponsiblePersonCard";
import DelayApplyCard from "./components/DelayApplyCard";
import { AvatarName } from '../../../components/widgets'
import apis from "../../../services/apis";
export default {
  name: "mainPage",
  components: {
    RectificationResponsiblePersonCard,
    DelayApplyCard,
    AvatarName
  },
  data() {
    return {
      num: 20,
      refreshing: false,
      loading: false,
      text: "List",
      open: false,
      selected: true,
      activeStep: 0,
      options: ["Option 1", "Option 2"],
      labelPosition: "left",
      form: {
        input: "",
        select: "",
        date: "",
        radio: "",
        checkbox: [],
        switch: false,
        slider: 30,
        textarea: ""
      },
      previewVisible: false,
      previewImage: "",
      fileList: [
        {
          uid: "-1",
          name: "xxx.png",
          status: "done",
          url:
            "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        }
      ],
      query: this.$route.query,
      dataPool: {}
    };
  },
  mounted() {
    this.loadApprovalDetail();
  },
  created() {},
  methods: {
    loadApprovalDetail() {
      this.$A
        .Go("get", apis.approval_detail, { id: this.query.businessId })
        .then(res => {
          const { code, msg, body } = res;
          this.dataPool = body;
          this.$A.MS(msg);
        })
        .catch(err => {
          this.$A.MS(err);
        });
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    handleResponsibleBtnClick(tag) {
      /**
       * tag 为 0 表示拒绝
       * tag 为 1 表示同意
       */
      console.log(tag);
    },
    handleApplyBtnClick(tag) {
      /**
       * tag 为 0 表示拒绝
       * tag 为 1 表示同意
       */
      console.log(tag);
    }
  }
};
</script>
<style lang="scss" scoped>
.listTemplate {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;

  .t-header {
    height: 0.45rem;
    width: 100%;
    color: #3d3d3d;
    box-sizing: border-box;
    padding: 5px 8px;
    position: relative;
    -border-bottom: 1px solid #dedede;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .t-close {
      min-width: 28px;
      border-radius: 50%;
    }

    .t-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.19rem;
      font-weight: 500;
    }

    .t-right-icon {
      font-size: 0.2rem;
    }
  }

  .t-body {
    height: calc(100% - 0.45rem);
    width: 100%;
    overflow: auto;
    background-color: #f8f8f8;
    padding: 10px;
  }

  .t-body + .t-footer {
    height: 0.45rem;
    width: 100%;
  }

  .t-footer + .t-body {
    height: calc(100% - 0.9rem);
  }

  // 自定义样式
  .box {
    padding: 10px 15px;
    background-color: #fff;
  }

  .line-list {
    margin: 15px 0;
    font-size: 0.15rem;
  }

  .textdot {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .table {
    width: 100%;
    height: auto;
    border: 1px solid #dedede;
    font-size: 0.12rem;
    line-height: 0.2rem;

    .tr {
      width: 100%;
      border-bottom: 1px solid #dedede;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .td {
        border-left: 1px solid #dedede;
        width: 100%;
        text-align: center;

        .tr {
          border-bottom: 1px solid #dedede;
          border-left: none;
        }

        > .tr:last-child {
          border: none;
        }
      }

      > .td:first-child {
        border: none;
      }

      .tr {
        border-left: 1px solid #dedede;
      }
    }

    > .tr:last-child {
      border: none;
    }

    .header {
      background-color: #ddd;
      color: #000;
    }

    .subheader {
      background-color: #eee;
      color: #333;
    }
  }
}
</style>
<style lang="scss">
.t-close {
  .mu-button-wrapper {
    padding: 0 !important;
  }
}

.active-color {
  color: #ff8a1b;
}

.td {
  .mu-checkbox-svg-icon {
    height: 20px;
    width: 20px;
  }

  .mu-checkbox {
    line-height: 20px;
    height: 20px;
  }
}

.t-body {
  .mu-expansion-panel-header {
    padding: 0 10px;
  }

  .mu-expansion-panel-content {
    padding: 0 5px;
  }

  .mu-expansion-panel__expand .mu-expansion-panel-header {
    min-height: 20px;
  }
}

.flex_b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.noshadow.mu-elevation-2 {
  box-shadow: none;
}

.stepper-lan {
  .mu-step-label {
    position: relative;

    .desc {
      position: absolute;
      top: 5px;
      transform: translateX(-50%);
      left: 50%;
      white-space: nowrap;
      font-size: 0.12rem;
    }

    .deTime {
      font-size: 0.12rem;
      position: absolute;
      bottom: 5px;
      transform: translateX(-50%);
      left: 50%;
      white-space: nowrap;
      font-size: 0.12rem;
    }
  }
}
</style>
<!-- 新增样式 -->
<style lang="scss">
.content-header-title {
  font-size: 0.14rem;
  font-weight: 500;
  color: #222222;
}
.content {
  font-size: 0.12rem;
  font-weight: 500;
  color: #222222;
  padding: 0.1rem 0.14rem;
}
</style>
